<template>
  <div class="layout-page">
    <MenuList />
    <div class="ymain flex">
      <NavBar :width="width" />
      <div class="content">
        <YangRouter />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, provide, watchEffect } from 'vue'
import MenuList from '@yang/components/MenuList/index.vue'
import NavBar from '@yang/components/NavBar/index'
import YangRouter from '@yang/components/YangRouter/index.vue'
import { useWindowSize } from '@vueuse/core'

const isOpen = ref(false)
const isOpenChange = () => {
  isOpen.value = !isOpen.value
}

provide('isOpen', isOpen)
provide('isOpenChange', isOpenChange)

const { width } = useWindowSize()

watchEffect(() => {
  if (width.value >= 900) {
    isOpen.value = true
  } else {
    isOpen.value = false
  }
})
</script>

<style lang="scss" scoped>
.layout-page {
  flex: 1 0 0;
  display: flex;
  background: var(--yang-bg-color);
  position: relative;
  .ymain {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .content {
      flex: 1;
      position: relative;
    }
  }
}
</style>
